<script>
/***
 抽屉
 props: 接收包含 chinaName 以及 id 属性的数组类
 emits: model绑定一个属性，表示选中的id
 */

export default {
  // 抽屉
  // eslint-disable-next-line vue/multi-word-component-names
  name: "DrawerBox",
  props:{
    items: {
      Array,
      required: true,
    },
    modelValue:{},
  },
  emits:['update:modelValue'],

  data(){
    return{
      drawer:false,
      selectedColor:'#fb7299',
      unselectedColor:'#757575'
    }
  },

  computed:{
    selectValue:{
      get(){
        return this.modelValue
      },
      set(value){
        this.$emit('update:modelValue',value)
      }
    },

  },

  methods:{
    // 更新选择的值
    updateSelectValue(value){
      this.selectValue = value
      this.drawer = false
    },

  },
}
</script>

<template>
  <div>
    <div class="drop-down-box">
      <el-drawer v-model="drawer" :with-header="false" direction="ttb">
        <div class="item"
             :style="{color:(item.id===this.selectValue?this.selectedColor:this.unselectedColor)}"
             v-for="item in items"
             :key="item.id"
             @click="updateSelectValue(item.id)">
          {{ item.chinaName }}
        </div>
        <svg class="icon close" aria-hidden="true" @click="drawer = false">
          <use xlink:href="#icon-xialaxiao"></use>
        </svg>
      </el-drawer>
        <svg class="icon" aria-hidden="true" @click="drawer = true">
          <use xlink:href="#icon-xialaxiao"></use>
        </svg>
    </div>
  </div>
</template>

<style scoped>
:deep(.el-drawer){
  box-shadow: none;
  height: auto !important;
}
:deep(.el-overlay)::before{
  position: absolute;
  content: '';
  height: 1px;
  background: #e7e7e7;
  transform: scaleY(.5);
  width: 100%;
  z-index: 2026;
}
:deep(.el-overlay){
  height: auto;
}

:deep(.el-drawer__body){
  display: flex;
  padding: 2.66667vmin 5.33333vmin;
  flex-wrap: wrap;
}

.drop-down-box{
  margin-top: 1.33333vmin;
}
.icon{
  font-size: 5.33333vmin;
  color: #aaa;
  margin: 0 2.66667vmin;
}
.close{
  position: absolute;
  transform: rotate(0.5turn) translate(50%);
  bottom: 0.53333vmin;
  left: 50%;
  margin: 0;
}
.item{
  margin: 2.13333vmin;
  white-space: nowrap;
  color: #757575;
}
</style>